<template>
    <div class="tags-btn">
        <el-button :disabled="disabled" @click="openSelectTag">+ 添加{{ tagBtnName }}</el-button>
        <span v-if="tagNum"
            >已选{{ tagBtnName }} <span class="tags-num">{{ tagNum }}</span> 个</span
        >
    </div>
    <!-- 选择标签 -->
    <div v-if="!slots.list && ['materialTag', 'custTag'].includes(type)" class="tags-list">
        <TagList
            :disabled="disabled"
            :theme="theme"
            :data-list="props.modelValue"
            @del="delItem"
            @clickMore="openSelectTag" />
        <ZwUnityKitSelectCustTags
            v-if="type === 'custTag'"
            v-model="visible"
            title="选择客户标签"
            :has-conditiion="false"
            :choose-data-arr="props.modelValue"
            @submit="res => getTags(res.data)" />
    </div>
    <!-- 选择员工 -->
    <div v-if="!slots.list && ['staff'].includes(type)" class="tags-list">
        <TagList
            :type="1"
            :disabled="disabled"
            :theme="theme"
            :data-list="modelValue"
            @del="delItem"
            @clickMore="openSelectTag" />
        <zw-unity-kit-select-depart
            v-model="visible"
            :selected="props.modelValue"
            v-bind="props.options"
            @submit="handleDepartSubmit" />
    </div>
    <!-- 选择群聊 -->
    <div v-if="!slots.list && ['group'].includes(type)" class="tags-list tags-group">
        <div class="group-box">
            <div v-for="(tag, index) in modelValue" :key="tag.id" class="group">
                <div class="group-detail">
                    <el-image :src="tag.logo">
                        <template #error>
                            <el-image :src="default_images.default_group_logo" />
                        </template>
                    </el-image>
                    <div class="group-name">
                        <div>{{ tag.name }}</div>
                    </div>
                </div>
                <div v-if="!disabled" class="del">
                    <el-icon @click="delItem(index)"><Close /></el-icon>
                </div>
            </div>
        </div>
        <div v-if="modelValue.length > 4" class="group-more" :class="{ disabled: 'disabled' }" @click="openSelectTag">
            <el-icon><MoreFilled /></el-icon>
        </div>
    </div>
    <!-- 插槽 -->
    <div v-if="slots.list" class="tags-list">
        <slot :list="modelValue" name="list"> </slot>
    </div>
</template>

<script setup lang="ts">
import { ElButton, ElTag, ElImage, ElIcon } from 'element-plus';
import { Close, MoreFilled } from '@element-plus/icons-vue';
import { computed, ref, useSlots, onMounted, reactive, handleError, nextTick, watch } from 'vue';
import { ZwUnityKitSelectDepart } from '../ZwUnityKitSelectDepart/index';
import { ZwUnityKitSelectCustTags } from '../ZwUnityKitSelectCustTags/index';
import TagList from './components/TagList';
import { ISelectType, IThemeType } from './type';

defineOptions({
    name: 'ZwUnityKitSelectItems'
});
const default_images = ref({
    default_user_avatar: 'https://img.static-keyid.cn/toolspace/scrm/2023/08/169348396644985g3f4wnjb7jzqvx.png',
    default_group_logo: 'https://img.static-keyid.cn/toolspace/scrm/2023/08/1693483961522k4qsjw4hwuno1h1r.png'
});

const slots = useSlots();

const props = withDefaults(
    defineProps<{
        type: ISelectType; // 类型   materialTag 选择素材标签   custTag 选择客户标签   staff 选择员工   group 选择群聊
        theme: IThemeType; // 主题色 默认为default，和scrm保持一致，可选值： default  success  info  warning  danger
        tagBtnName: string; // 选择标签按钮名称
        options: any; // 选择组件配置
        modelValue: Array<any>; // 选中的标签
        disabled: boolean; // 是否禁用
    }>(),
    {
        type: 'materialTag',
        theme: 'default',
        tagBtnName: '标签',
        options: () => {},
        modelValue: () => [],
        disabled: false
    }
);

const tagNum = computed(() => props.modelValue.length);

const emit = defineEmits(['update:modelValue', 'open', 'change']);

/**
 * @description: 打开选择标签同框
 * @return {*}
 */
const openSelectTag = () => {
    emit('open', props.modelValue);
    openSelectDialog();
};

/**
 * @description: 删除标签
 * @param {*} index
 * @return {*}
 */
const delItem = (index: any) => {
    const tagsList = [...props.modelValue];
    tagsList.splice(index, 1);
    getTags([...tagsList]);
};

/**
 * @description: 获取标签
 * @param {*} val 接受参数
 * @return {*}
 */
const getTags = (val: any[]) => {
    emit('update:modelValue', val);
    emit('change', val);
};

/**
 * @description: 设置element主体色
 * @return {*}
 */
const setColor = () => {
    document.body.style.setProperty('--el-color-primary', '#ff6b00');
    document.body.style.setProperty('--el-color-primary-light-3', '#FF9D51');
    document.body.style.setProperty('--el-color-primary-light-6', '#FFB988');
    document.body.style.setProperty('--el-color-primary-light-7', '#FFD6C1');
    document.body.style.setProperty('--el-color-primary-light-8', '#FFD6C1');
    document.body.style.setProperty('--el-color-primary-light-9', '#FFEDDA');
};

/* ----------------------------打开选择弹窗-start---------------------------- */
/**
 * 弹窗是否展示
 */
const visible = ref(false);

const handleDepartSubmit = (val: any[]) => {
    getTags([...val]);
};
/**
 * 打开选择弹窗,根据当前类型
 */
const openSelectDialog = () => {
    // 使用插槽的情况下不做操作
    if (slots.list) {
        return;
    }
    visible.value = true;
};
/* ----------------------------打开选择弹窗-end---------------------------- */

onMounted(() => {
    setColor();
});
</script>

<style lang="scss" scoped>
@import './Index';
</style>
